<template>
    <div>
        <PageHeader></PageHeader>

        <div class="body">
            <div class="container">
                <div class="article">
                    <h1 class="title" v-text="article.title"></h1>

                    <p class="info">
                        <span v-text="article.author.username"></span>
                        <span v-text="article.addTime"></span>
                        <!-- to前面的冒号是为了拼接表达式 -->
                        <router-link :to="'/update/' + aid">修改</router-link>
                        <router-link>删除</router-link>
                    </p>

                    <p class="content" v-text="article.content"></p>
                </div>
            </div>
        </div>

        <PageFooter></PageFooter>
    </div>
</template>

<script>
import PageHeader from "@/components/commons/header";
import PageFooter from "@/components/commons/footer";
export default {
    props: ["aid"],
    components: { PageHeader, PageFooter },
    data() {
        return {
            article: {
                id: 1,
                title: "文章标题",
                content: ` 学术期刊《柳叶刀·精神病学》4月6日发布的一项新研究显示，有超过三分之一的新冠治愈者脑部出现问题。
                        
                        这项迄今为止规模最大的研究涉及了美国境内236000名新冠患者的健康记录。
                        
                        研究人员称，他们发现有高达34%的新冠患者在治愈后六个月内被诊断出患有神经或心理疾病。
                        
                        其中，17%的患者诊断为焦虑，还有14%的患者身患情绪障碍。
                        
                        另外，每50名新冠患者中就有一人患有缺血性中风，这是一种会影响大脑的疾病。
                        
                        研究人员还称，如果这项统计包含了住院病人，那么脑部出现问题的病人比例将上升到39%。
                    `,
                addTime: "2021-04-08 11:05:15",
                author: {
                    id: 1,
                    username: "张三",
                },
            },
        };
    },
};
</script>

<style lang="less" scoped>
.article {
    .title {
        font-size: 26px;
        line-height: 40px;
    }

    .info {
        font-size: 15px;
        color: #999;
        border-bottom: 1px solid #ddd;
        margin: 20px 0;
        padding-bottom: 5px;

        span,
        a {
            margin-right: 10px;
        }
    }

    .content {
        text-align: justify;
        font-size: 17px;
        line-height: 30px;
        letter-spacing: 1px;
        text-indent: 2em;
    }
}
</style>